<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title></title>
    <script src='./vue.global.js'></script>
</head>
<body>
    <div id='app'>
        <!-- 定义在组件级别的attribute默认被组件的根布局所继承 -->
        <datetime-picker name="partydate" roomid="1001" :payer="payer"></datetime-picker>
    </div>

    <script>
        const app = Vue.createApp({
            data(){
                return {
                    payer:"钻石王老五"
                }
            },
            methods:{},
            computed:{}
        })

        app.component("datetime-picker",{
            // template:`
            // <div class="root">
            //     <input type="datetime-local">
            // </div>
            // `,

            // 禁用默认的属性继承 inherit继承 attribute属性
            inheritAttrs:false,

            template:`
            <!-- inheritAttrs:false 禁用了默认的属性继承 根布局不再继承组件层面定义的任何attribute -->
            <div class="root">
                <!-- v-bind="$attrs" 将$attrs对象中的所有属性都进行绑定 -->
                <input type="datetime-local" v-bind="$attrs"><br>

                <!-- 明确声明由特定元素去接收特定的attribute -->
                <input type="datetime-local" v-bind:myname="$attrs.name"><br>
                <input type="datetime-local" :myroomid="$attrs.roomid"><br>
            </div>
            `,

            props:["payer"],

            /* 组件实例一旦被创建完毕 就能拿到所有的attribute */
            created(){
                // {name: 'partydate', roomid: '1001', __vInternal: 1}
                console.log("created:this.$attrs",this.$attrs);
                console.log("created:this.$props",this.$props);
            }
        })

        app.mount('#app')
    </script>
</body>
</html>